<template>
	<view class="spinner">
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view></view>
</template>

<script>
	export default {
		name:"bs-load",
		props: {
			// 图片源地址
			src: {
				type: String,
				required: true
			},
			// 图片模式，同uniapp的image组件mode
			mode: {
				type: String,
				default: 'scaleToFill'
			},
			// 图片宽度
			width: {
				type: String,
				default: '100%'
			},
			// 图片高度
			height: {
				type: String,
				default: 'auto'
			},
			// 加载中动画颜色
			loadingColor: {
				type: String,
				default: '#409eff'
			},
			// 加载失败图标颜色
			errorColor: {
				type: String,
				default: '#f56c6c'
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
/* From Uiverse.io by Mike11jr */ 
	.spinner {
	 width: 30px;
	 height: 30px;
	 position: relative;
	}
	
	.spinner .dot {
	 position: absolute;
	 inset: 0;
	 display: flex;
	 justify-content: center;
	}
	
	.spinner .dot::after {
	 content: "";
	 width: 7rpx;
	 height: 7rpx;
	 border-radius: 50%;
	 background-color: v-bind(loadingColor);
	}
	
	@keyframes spin {
	 to {
	  transform: rotate(360deg);
	 }
	}
	
	.spinner .dot {
	 animation: spin 2s infinite;
	}
	
	.spinner .dot:nth-child(2) {
	 animation-delay: 100ms;
	}
	
	.spinner .dot:nth-child(3) {
	 animation-delay: 200ms;
	}
	
	.spinner .dot:nth-child(4) {
	 animation-delay: 300ms;
	}
	
	.spinner .dot:nth-child(5) {
	 animation-delay: 400ms;
	}
</style>